<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <header class="header">
      <div v-for="(item, index) in topInputList" :key="index" class="everyBox">
        <span class="span">{{ item.title }}：</span>
        <el-input
          placeholder=""
          v-model="item.text"
          :placeholder="item.title"
          class="top-input"
        ></el-input>
      </div>
      <div class="everyBox slelctBox">
        <span class="span">退款状态：</span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          @change="opctionchangeOne"
        >
          <el-option
            clearable
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="onReset"
          >重置</el-button
        >
      </div>
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          prop="refund_id"
          label="退款单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="aftersales_id"
          label="售后单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户"
          width="150"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="source_id"
          label="订单号"
          width="170"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="money"
          label="退款金额"
          width="90"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="Reship_status_text"
          label="退货状态"
          width="110"
        >
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="memo" label="说明">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="payment_text"
          label="退款方式"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status_text"
          label="状态"
          width="100"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ctime"
          label="创建时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="date"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              @click="tuikuan(scope.row)"
              size="mini"
              v-if="
                (scope.row.status == 1 ||
                  scope.row.status == 3 ||
                  scope.row.status == 4) &&
                (scope.row.Reship_status == '') | (scope.row.Reship_status == 3)
              "
              >退款</el-button
            >
            <el-button @click="checkOrder(scope.row)" size="mini "
              >明细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="退款单查看"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="退款单号">{{
          orderDetails.refund_id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          orderDetails.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="退款方式">{{
          orderDetails.payment_text
        }}</el-descriptions-item>
        <el-descriptions-item label="退款金额">{{
          orderDetails.money
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          orderDetails.status_text
        }}</el-descriptions-item>
        <el-descriptions-item label="单号">{{
          orderDetails.source_id
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog
      title="退款"
      :visible.sync="dialogVisible2"
      width="50%"
      :before-close="handleClose2"
    >
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="退款单号" :span="2">{{
          orderDetails2.refund_id
        }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{
          orderDetails2.nickname
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          orderDetails2.status_text
        }}</el-descriptions-item>
        <el-descriptions-item label="单号">{{
          orderDetails2.source_id
        }}</el-descriptions-item>
        <el-descriptions-item label="退款金额">{{
          orderDetails2.money
        }}</el-descriptions-item>

        <el-descriptions-item label="退货状态" :span="2">{{
          orderDetails2.Reship_status_text
        }}</el-descriptions-item>
        <!--        <el-descriptions-item label="退款方式">-->
        <!--          <el-select v-model="value2" placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in options2"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-descriptions-item>-->
        <el-descriptions-item label="审核结果" :span="2">
          <el-radio v-model="radio" label="1">通过</el-radio>
          <el-radio v-model="radio" label="2">拒绝</el-radio>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeVisible">取 消</el-button>
        <el-button type="primary" @click="save">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { exitOrder, refund } from "../../../utils/api";

export default {
  name: "exitOrder",
  data() {
    return {
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      dialogVisible2: false,
      topInputList: [
        { title: "退款单号", text: "" },
        { title: "售后单号", text: "" },
        // {title:'手机号',text:''},
      ],
      options1: [
        {
          value: "1",
          label: "未退款",
        },
        {
          value: "2",
          label: "退款成功",
        },
        {
          value: "3",
          label: "退款失败",
        },
        {
          value: "4",
          label: "退款拒绝",
        },
      ],
      options2: [
        {
          value: "1",
          label: "微信支付",
        },
      ],
      value1: "",
      value2: "1",
      loading: true,
      tableData: [],
      limit: 10,
      currentPage: 1,
      total: 0,
      orderDetails: {},
      orderDetails2: {},
      radio: "",
    };
  },
  methods: {
    save() {
      if (this.radio == "") {
        this.$message("请选择审核结果");
        return;
      }
      refund(
        this.token,
        this.orderDetails2.refund_id,
        this.orderDetails2.money,
        this.orderDetails2.source_id,
        this.radio
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
            onClose: (res) => {
              this.$emit("back");
            },
          });
        } else {
          this.$message.error(res.data.msg);
        }
        this.getList(
          this.token,
          this.currentPage,
          this.limit,
          this.value1,
          this.topInputList[0].text,
          this.topInputList[1].text
        );
      });
      this.dialogVisible2 = false;
      this.orderDetails2 = {};
      this.radio = "";
    },
    closeVisible() {
      this.dialogVisible2 = false;
      this.orderDetails2 = {};
      this.radio = "";
    },
    checkOrder(row) {
      this.dialogVisible = true;
      this.orderDetails = row;
    },

    // 退款按钮
    tuikuan(row) {
      this.orderDetails2 = JSON.parse(JSON.stringify(row));
      this.dialogVisible2 = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.orderDetails = {};
    },
    handleClose2() {
      this.dialogVisible2 = false;
      this.orderDetails2 = {};
      this.radio = "";
    },
    handleSizeChange(val) {
      this.limit = val;
      // console.log(`每页 ${val} 条`);
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.value1,
        this.topInputList[0].text,
        this.topInputList[1].text
      );
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.value1,
        this.topInputList[0].text,
        this.topInputList[1].text
      );
    },
    search() {
      this.currentPage = 1;
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.value1,
        this.topInputList[0].text,
        this.topInputList[1].text
      );
    },
    onReset() {
      this.topInputList[0].text = "";
      this.topInputList[1].text = "";
      this.value1 = "";
      this.getList(
        this.token,
        this.currentPage,
        this.limit,
        this.value1,
        this.topInputList[0].text,
        this.topInputList[1].text
      );
    },
    opctionchangeOne(e) {},
    handleSelectionChange() {},
    getList(token, page, limit, status, refund_id, aftersales_id) {
      this.loading = true;
      exitOrder(token, page, limit, status, refund_id, aftersales_id, "").then(
        (res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.count;
            this.tableData.forEach((item) => {
              // Reship_status  1=未退货  2=未收货  3=确认收货
              if (item.Reship_status == "") {
                item.Reship_status_text = "无需退货";
              }
              if (item.Reship_status == 1) {
                item.Reship_status_text = "未退货";
              }
              if (item.Reship_status == 2) {
                item.Reship_status_text = "未收货";
              }
              if (item.Reship_status == 3) {
                item.Reship_status_text = "确认收货";
              }
              if (item.status == 1) {
                item.status_text = "未退款";
              }
              if (item.status == 2) {
                item.status_text = "退款成功";
              }
              if (item.status == 3) {
                item.status_text = "退款失败,可再次退款";
              }
              if (item.status == 4) {
                item.status_text = "退款拒绝";
              }
              if (item.payment_code == "wechatpay") {
                item.payment_text = "微信";
              }
              if (item.payment_code == "balancepay") {
                item.payment_text = "余额";
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            this.$message.error(res.data.msg);
            this.loading = false;
          }
        }
      );
    },
  },
  created() {
    this.getList(
      this.token,
      this.currentPage,
      this.limit,
      this.value1,
      this.topInputList[0].text,
      this.topInputList[1].text
    );
  },
  watch: {
    value1(n, o) {
      if (n == 111) {
        this.value1 = "";
      }
      this.status = this.value1;
    },
  },
};
</script>

<style scoped>
.body {
  margin: 20px 0;
}
.slelctBox {
  margin: 0 10px;
}
.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.header .span {
  font-size: initial;
}
.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.top-input {
  width: 150px;
  margin-right: 20px;
}
.el-table th.el-table__cell > .cell {
  text-align: center;
}
.el-table .cell.el-tooltip {
  text-align: center;
}
.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
}
.contentBox {
  width: 50%;
}
.contentBox .span {
  width: 40%;
}
</style>

